<template>
  <div class="font-wrap" ref="topbox">
    <div :class="['font-list', dynamicCls]" :style="dynamicSty">
      <div class="item" ref="fontbox" v-html="content"></div>
      <div class="item" v-if="doubleData" v-html="content"></div>
    </div>
  </div>
</template>

<script>
//垂直滚动
export default {
  name: "ScrollY",

  props: {
    content: {
      default: "",
    },
    pageDuration: {
      default: 8,
    },
  },

  data() {
    return {
      doubleData: false, // 是否需要双份数据
      fontBox: null, // 文字容器
      topBox: null, // 文字父级容器
      countFlag: 0, // 切换clss类标识符
      dynamicCls: "", // 动态class类，切换使用解决数据更新后动画不重新开始问题
      dynamicSty: {},
    };
  },

  mounted() {
    this.fontBox = this.$refs.fontbox;
    this.topBox = this.$refs.topbox;
    this.$nextTick(() => {
      this.calcHeight();
    });
  },

  methods: {
    calcHeight() {
      // 判断内容是否超出容器，如果超出容器、追加一份数据
     this.$nextTick(()=>{
       let fontBox = this.$refs.fontbox;
       let topBox = this.$refs.topbox;
       // console.log(fontBox.offsetHeight);
       // console.log(topBox.offsetHeight)
       // console.log(fontBox.offsetHeight > topBox.offsetHeight)
       if (this.fontBox.clientHeight > this.topBox.clientHeight) {
         this.doubleData = true;
         this.countFlag += 1;
         // 切换动画类名
         this.dynamicCls = `scroll-cls${this.countFlag % 2}`;
         // 动态计算动画时长
         let info =  (this.fontBox.offsetHeight / this.topBox.offsetHeight) * this.pageDuration

         this.dynamicSty = {
           animationDuration: `${info}s`,
         };
       } else {
         this.doubleData = false;
         this.dynamicCls = "";
         this.dynamicSty = {
           animationDuration: "0s",
         };
       }
     })

    },
  },

  watch: {
    // 监听内容变化
    content(val) {
      this.$nextTick(() => {
        this.calcHeight();
      });
    },
  },

};
</script>

<style lang="scss" scoped>
.font-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;


  .ql-editor{
    overflow-y: initial !important;
    line-height: 38px;
    box-sizing: border-box;
  }
}

.ql-snow{
  border: none;
  box-sizing: border-box;
}

.scroll-cls0 {
  animation: translateY1 8s 0.5s linear infinite;
}

.scroll-cls1 {
  animation: translateY2 8s 0.5s linear infinite;
}

.font-list:hover {
  animation-play-state: paused;
}

@keyframes translateY1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes translateY2 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
</style>